<template>
    <view>
        <view @tap="showNews(item.content.articles[0].url)" class="cu-card case" v-bind:key="item.mediaId"
              v-for="item in news">
            <view class="cu-item shadow">
                <view class="image">
                    <image :src="item.content.articles[0].thumbUrl" mode="widthFix"></image>
                    <view class="cu-bar bg-shadeBottom">
                        <text class="text-cut">{{ item.content.articles[0].digest }}</text>
                    </view>
                </view>
                <view class="cu-list">
                    <view style="padding: 20upx;">
                        <view class="text-gray">{{item.content.articles[0].title}}</view>
                        <view class="text-gray text-sm flex justify-between" style="margin-top: 16upx;">
                            {{item.content.updateTime}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts">
    import vue from 'vue'
    import {http} from "@/utils/utils";


    export default vue.extend({
        name: 'news',
        data() {
            return {news: null, data: null}
        },
        methods: {
            showNews(url: string) {
                console.log(url);
                uni.navigateTo({
                    url: '../news/news-info?url=' + encodeURIComponent(url)
                })
            },
        },
        mounted(): void {
            console.log("mounted");
            http.get('api/ma/news').then((result: any) => {
                console.log(result);
                this.news = result.data.items;
            }).catch(reason => console.error(reason));
        },
        onShow(){
            console.log("onShow news")
        }
    })
</script>

<style scoped>

</style>
